$(function () {
    $.ajax({
        type: "POST",
        async:false,
        url: baseURL + 'sys/buserinfo/getUserGzhList',
        contentType: "application/json",
        success: function(r){
            if(r.code==0){
                $("#selectUserGzhList").append(
                    "<option value=''>请选择公众号</option>");
                for(var i=0;i<r.userGzhList.length;i++){
                    $("#selectUserGzhList").append(
                        "<option value=" + r.userGzhList[i].gzhCode +">"+ r.userGzhList[i].gzhName+"</option>");
                }
            }
        }
    });

    $.ajax({
        type: "POST",
        async:false,
        url: baseURL + 'sys/gzhmenutemplate/getGzhMenuTemplateList',
        contentType: "application/json",
        success: function(r){
            if(r.code==0){
                $("#selectGzhMenuList").append(
                    "<option value=''>请选择模板</option>");
                for(var i=0;i<r.gzhMenuTemplateList.length;i++){
                    $("#selectGzhMenuList").append(
                    "<option value=" + r.gzhMenuTemplateList[i].templateName +">"+ r.gzhMenuTemplateList[i].templateName+"</option>");
                }
            }
        }
    });

    // 类型下拉框绑定 onchange 事件
    let allForm = $("#menu-content").find("form");// 所有表单
    for (let i = 0; i < allForm.length; i++) {
        let type = $(allForm[i]).find("select").eq(0);// 表单中的第一个 select 下拉框，即菜单类型
        $(type).change(function () {
            vm.showDetailType($(type));
        });
    }
})

var vm = new Vue({
    el: "#rrapp",
    data: {
        gzhCode: '',
        clientPlatformType: 0,
        index: null,
        wxMenu: {
            buttons: [
                {
                    name: null,
                    type: '',
                    url: '',
                    key: '',
                    subButtons: [
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                    ]
                },
                {
                    name: null,
                    type: '',
                    url: '',
                    key: '',
                    subButtons: [
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                    ]
                },
                {
                    name: null,
                    type: '',
                    url: '',
                    key: '',
                    subButtons: [
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                        {
                            name: null,
                            type: '',
                            url: '',
                            key: '',
                        },
                    ]
                }
            ],
            matchRule: {
                clientPlatformType: 0
            }
        }
    },
    methods: {
        saveAsTemplate: function () {
            if(!vm.checkParameter()) {
                return;
            }

            let index = layer.open({
                type: 1,
                title: '请输入模板的名称',
                area: ['600px', '200px'],
                shadeClose: true,
                content: $('#gzh_menu_template')
            });
            vm.index = index;
        },
        saveTemplate: function () {
            let gzhMenuTemplateName = $("#gzhMenuTemplateName").val();
            if (!gzhMenuTemplateName || gzhMenuTemplateName == "") {
                alert("模板名称不能为空");
                return;
            }

            let data = {gzhCode: vm.gzhCode, wxMenu: vm.wxMenu};
            let param = {templateName: gzhMenuTemplateName, templateContent: JSON.stringify(data)};

            // json 转化为 字符串存入数据库
            $.ajax({
                type: "POST",
                url: baseURL + "sys/gzhmenutemplate/save",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(param),
                dataType: "json",
                success: function (r) {
                    if (r.code == 0) {
                        alert("操作完成");
                        layer.close(vm.index);
                    } else {
                        alert(r.msg);
                    }
                }
            })
        },
        cancle: function () {
            if (vm.index) {
                layer.close(vm.index);
            }
        },
        updateTemplateView: function (obj) {
            let templateName = $("#selectGzhMenuList").val();
            if (!templateName || templateName == "") {
                return;
            }

            $.ajax({
                type: "GET",
                url: baseURL + "sys/gzhmenutemplate/getGzhMenuTemplateByName",
                contentType: "application/json;charset=utf-8",
                data: {"templateName": templateName},
                success: function (r) {
                    if (r.code == 0) {
                        debugger
                        let templateContent = JSON.parse(r.gzhMenuTemplate.templateContent);
                        vm.gzhCode = templateContent.gzhCode;
                        vm.wxMenu = templateContent.wxMenu;
                    }
                }
            });

            setTimeout(function () {
                let allForm = $("#menu-content").find("form");// 所有表单
                for (let i = 0; i < allForm.length; i++) {
                    let type = $(allForm[i]).find("select").eq(0);// 表单中的第一个 select 下拉框，即菜单类型
                    vm.showDetailType($(type));
                }
            }, 500);
        },
        showDetailType: function (obj) {
            let typeName = $(obj).val();
            let div = $(obj).parent().next();

            if (typeName == "view") {
                $(div).children().eq(0).css("display", "none");
                $(div).children().eq(1).css("display", "inline-block");
                $(div).children().eq(2).css("display", "none");
            } else if (typeName == "click") {
                $(div).children().eq(0).css("display", "none");
                $(div).children().eq(1).css("display", "none");
                $(div).children().eq(2).css("display", "inline-block");
            } else {
                $(div).children().eq(0).css("display", "inline-block");
                $(div).children().eq(1).css("display", "none");
                $(div).children().eq(2).css("display", "none");
            }
        },
        save: function () {
            // 1、参数校验
            if (!vm.gzhCode || vm.gzhCode == '') {
                alert("请选择公众号");
                return;
            }

            // 参数校验2
            if(!vm.checkParameter()) {
                return;
            }

            // 2、发送请求
            $.ajax({
                type: "POST",
                url: baseURL + "wechat/createWxMenu",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: JSON.stringify(vm.wxMenu),
                headers: {"gzhCode": vm.gzhCode},
                success: function (r) {
                    if (r.code == 0) {
                        alert("保存成功");
                    } else {
                        alert(r.msg);
                    }
                }
            })
        },
        /**
         * 参数校验
         */
        checkParameter: function () {
            for (let i = vm.wxMenu.buttons.length - 1; i >= 0; i--) { // 倒序循环
                // 1、如果当前主菜单为空，则跳过
                if (!vm.wxMenu.buttons[i].name || vm.wxMenu.buttons[i].name == "") {
                    continue;
                }

                // 2、不允许存在前面有空菜单而后面设置了菜单的情况，只能按顺序设置
                if (i > 0 && (!vm.wxMenu.buttons[i - 1].name || vm.wxMenu.buttons[i - 1].name == "")) {
                    alert("第"+i+"个主菜单名称不能为空，请按顺序设置主菜单");
                    return false;
                }

                // 3、如果主菜单设置了类型，则必须选择具体类型
                if (vm.wxMenu.buttons[i].type && vm.wxMenu.buttons[i].type != "") {
                    let typeName = vm.wxMenu.buttons[i].type;
                    if (typeName == "view") {
                        if (!vm.wxMenu.buttons[i].url || vm.wxMenu.buttons[i].url == "") {
                            alert("第"+(i+1)+"个主菜单中，链接不能为空");
                            return false;
                        }
                    } else if (typeName == "click") {
                        if (!vm.wxMenu.buttons[i].key || vm.wxMenu.buttons[i].key == "") {
                            alert("第"+(i+1)+"个主菜单中，键不能为空");
                            return false;
                        }
                    }
                }

                for (let j = vm.wxMenu.buttons[i].subButtons.length - 1; j >= 0; j--) {
                    // 4、如果当前主菜单为空，则跳过
                    if (!vm.wxMenu.buttons[i].subButtons[j].name || vm.wxMenu.buttons[i].subButtons[j].name == "") {
                        continue;
                    }

                    // 5、不允许存在前面有空菜单而后面设置了菜单的情况，只能按顺序设置
                    if (j > 0 && (!vm.wxMenu.buttons[i].subButtons[j - 1].name || vm.wxMenu.buttons[i].subButtons[j - 1].name == "")) {
                        alert("第"+(i+1)+"个主菜单中，第"+j+"个子菜单名称不能为空，请按顺序设置子菜单");
                        return false;
                    }

                    // 6、子菜单必须设置类型和具体类型
                    if (!vm.wxMenu.buttons[i].subButtons[j].type || vm.wxMenu.buttons[i].subButtons[j].type == "") {
                        alert("第"+(i+1)+"个主菜单中，第"+(j+1)+"个子菜单类型不能为空");
                        return false;
                    } else {
                        let typeName = vm.wxMenu.buttons[i].subButtons[j].type;
                        if (typeName == "view") {
                            if (!vm.wxMenu.buttons[i].subButtons[j].url || vm.wxMenu.buttons[i].subButtons[j].url == "") {
                                alert("第"+(i+1)+"个主菜单中，第"+(j+1)+"个子菜单链接不能为空");
                                return false;
                            }
                        } else if (typeName == "click") {
                            if (!vm.wxMenu.buttons[i].subButtons[j].key || vm.wxMenu.buttons[i].subButtons[j].key == "") {
                                alert("第"+(i+1)+"个主菜单中，第"+(j+1)+"个子菜单键不能为空");
                                return false;
                            }
                        }
                    }
                }
            }

            if (!vm.wxMenu.buttons[0].name || vm.wxMenu.buttons[0].name == "") {
                alert("请先创建菜单");
                return false;
            }

            return true;
        },
        reload: function () {
            location.reload();
        }
    }
})